// 面包屑组件
// 使用render 并用单项面包屑组件显示,这里删除html部分


<script>
import {h} from 'vue'
export default {
    name:'TiziBread',
    render() {
        // 用法
        // 1. template 标签去除，单文件组件
        // 2. 返回值就是组件内容
        // 3. vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
        // 4. h 第一个参数 标签名字  第二个参数 标签属性对象  第三个参数 子节点
        // 需求
        // 1. 创建tizi-bread父容器
        // 2. 获取默认插槽内容
        // 3. 去除tizi-bread-item组件的i标签，因该由render函数来组织
        // 4. 遍历插槽中的item，得到一个动态创建的节点，最后一个item不加i标签
        // 5. 把动态创建的节点渲染再tizi-bread标签中
        const items = this.$slots.default()
        const dymanicItems = []
        items.forEach((item, i) => {
        dymanicItems.push(item)
        if (i < (items.length - 1)) {
            dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
        }
        })
        return h('div', { class: 'tizi-bread' }, dymanicItems)
    }
    // props: {
    //     parentName: {
    //         type:String,
    //         default:''
    //     },
    //     parentPath : {
    //         type:String,
    //         default:''
    //     }
    // }
}
</script>

<style lang="less">
// 去除 scoped属性，目的： 然样式作用到单项面包屑组件
.tizi-bread{
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all .4s;
      &:hover {
        color: @tiziColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
    &:last-child {
        display: none;
    }
  }
}
</style>